<template>
	<mavon-editor class="me-editor" ref="md" v-model="editor.value" @imgAdd="imgAdd">
	</mavon-editor>
</template>
<script>
	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'
	export default {
		name: 'MarkdownEditor',
		components: {
			mavonEditor
		},
		props: {
			editor: Object
		},
		data() {
			return {

			}
		},
		mounted() {
			this.$set(this.editor, 'ref', this.$refs.md)
		},
		methods: {
			imgAdd(pos, $file) {
				let that = this
				const formdata = new FormData();
				formdata.set("multipartFile", $file);
				this.$api.write.upload(formdata).then(data => {
					console.log(data);
					// 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
					if (data.success) {
						that.$refs.md.$img2Url(pos, data.data);
					} else {
						that.$message({
							message: data.msg,
							type: 'error',
							showClose: true
						})
					}
				}).catch(err => {
					that.$message({
						message: err,
						type: 'error',
						showClose: true
					});
				})
			}
		},
		components: {
			mavonEditor
		}
	}
</script>
<style scoped>
	.me-editor {
		z-index: 6 !important;
	}

	.v-note-wrapper.fullscreen {
		top: 60px !important
	}
</style>